<template>
  <n-card
      :bordered="false"
      class="mt-4 proCard"
      size="small"
      :segmented="{ content: 'hard' }"
    >
    <div class="formClass">
      <n-form :model="formValue"  :size="size" ref="formRef" label-placement="top">
        <n-space justify="space-between">
          <n-h6 prefix="bar" type="success">基本信息</n-h6>
          <n-space>
            <n-button v-if="type"  size="small" @click="edit()">编辑</n-button>
            <n-button v-if="!type" size="small" @click="cancel()">取消</n-button>
            <n-button v-if="!type" type="success" size="small" @click="preservation()">保存</n-button>
          </n-space>
        </n-space>
        <n-grid :cols="24" :x-gap="24">
          <n-form-item-gi v-for="(item,index) in ItemList" :key="index" :span="item.span" :label="item.label">
            <component :is="item.type" v-model:value="formValue[item.enName]" :disabled="item.disabled" :options="item.options" :src="item.src" :size="item.size" :style="{ width:item.width }"></component>
          </n-form-item-gi>
        </n-grid>
      </n-form>
    </div>
  </n-card>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { useMessage } from 'naive-ui';
import { NConfigProvider, NCascader, NInput, NDatePicker, NSpace } from 'naive-ui';

export default defineComponent({
  components: {
    NConfigProvider,
    NInput,
    NDatePicker,
    NSpace,
  },

  setup() {
    const formRef = ref(null);
    const message = useMessage();
    const type = ref(true)
    const formValue = ref({})
    const ItemList = ref([
      {label:'姓名',type:'N-input',enName:'qiyefaren1',span:12,clearable: true,disabled:true,size: 'small'},
      {label:'性别',type:'N-select',enName:'sex',span:12,clearable: true,disabled:true,size: 'small',options:[{label:'男',value:1},{label:'女',value:2}]},
      {label:'年龄',type:'N-input',enName:'qiyefaren11',span:12,clearable: true,disabled:true,size: 'small'},
      {label:'联系电话',type:'N-input',enName:'qiyefaren22',span:12,clearable: true,disabled:true,size: 'small'},
      {label:'所属部门',type:'N-input',enName:'qiyefaren33',span:12,clearable: true,disabled:true,size: 'small'},
    ]);
    //编辑
    const edit = () => {
      type.value = false
       ItemList.value.map((res) => {
         return res.disabled = false
       })
    };
    //保存
    const preservation = () => {
      type.value = true
      ItemList.value.map((res) => {
        return res.disabled = true
      })
    }
    //取消
    const cancel = () => {
      type.value = true
      ItemList.value.map((res) => {
        return res.disabled = true
      })
    }
    return {
      formRef,
      type,
      formValue,
      edit,
      preservation,
      cancel,
      size: ref('medium'),
      ItemList,
      handleValidateButtonClick(e) {
        e.preventDefault();
        formRef.value.validate((errors) => {
          if (!errors) {
            message.success('验证成功');
          } else {
            console.log(errors);
            message.error('验证失败');
          }
        });
      },
    };
  },
});
</script>
<style lang="less" scoped>
.formClass {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>